<template>
  <div>
    <n-card
      v-for="([key, value], index) in Object.entries(statisticInfo)"
      :key="key"
      :title="dataMap[key]"
    >
      {{ value }}
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { getStatistics } from '@/api'

const dataMap = {
  user: '用户数',
  scenic: '景区数',
  community: '内容数'
}

const statisticInfo = ref({
  user: 0,
  scenic: 0,
  community: 0
})

statisticInfo.value = await getStatistics()
</script>

<style scoped lang="scss">
div {
  display: flex;
}

.n-card:not(:last-child) {
  margin-right: 10px;
}
</style>
